<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="images/抽奖.gif" type="image/x-icon">
  <title>福州ROBO信奥种子选手抽奖专用3</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(90deg,brown,white,orange);
    }

    #container {
      width: 350px;
      height: 340px;
      margin: 2% auto;
      border: 7px solid #99d4ff;
      border-radius: 10px;
      padding: 2%;
    }

    #list {
      width: 360px;
      height: 340px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #list li,
    #list span {
      width: 100px;
      height: 100px;
      float: left;
      text-align: center;
      line-height: 100px;
      position: relative;
      background-color: #384f9a;
      margin: 1.4%;
      border-radius: 5px;
    }

    #list li img {
      display: block;
      width: 100%;
      height: 100%;
    }

    #list li.mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: url(images/mask.png) no-repeat;
      background-size: cover;
      display: none;
    }

    #list span:hover {
      cursor: pointer;
      color: orange;
      font-size: 18px;
    }

    #list.active.mask {
      display: block;
    }

    #message {
      text-align: center;
      position: absolute;
      line-height: 50px;
      left: 50%;
      top: 20px;
      width: 300px;
      height: 50px;
      margin-left: -150px;
      display: none;
      background: rgb(156, 231, 85);
      color: black;
      border-radius: 20px;
    }

    #select {
      font-size: 18px;
      line-height: 32px;
      text-align: center;
      margin-top: 3%;
    }

    #classSelect {
      height: 28px;
    }

    li {
      border: 3px transparent dashed;
    }

    #startbutton {
      border: 3px transparent dashed;
    }

    /* 定义抽奖动画效果 */
    @keyframes lotteryAnimation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 应用动画到图片元素，设置动画时长、线性过渡等属性，调整动画时长为3秒，过渡更自然 */
   .lottery-running {
      animation: lotteryAnimation 1s linear infinite;
    }

    /* 定义闪烁效果的动画，用于抽奖过程中增加趣味性 */
    @keyframes blinkAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }

   .blinking {
      animation: blinkAnimation 1s linear infinite;
    }
  </style>
</head>

<body>
    <marquee behavior="" direction="left">幸运大抽奖：</marquee>
    <div style="text-align:center;"> 
        <a href="抽奖1.html" style="text-decoration:none;color:black;font-size:18px;">滚动牌</a>
        <a href="抽奖2.html" style="text-decoration:none;color:black;font-size:18px;">幸运大转盘</a>
        <a href="抽奖3.html" style="text-decoration:none;color:black;font-size:18px;">翻牌子</a>
        <a href="抽奖4.html" style="text-decoration:none;color:black;font-size:18px;">新玩法</a>
      </div>
  <h3 style="text-align:center;margin-top: 2%;color:rgb(8, 5, 5);font-size: 30px;">ROBO 信奥抽奖</h3>
  <div id="select">
    <select id="classSelect">
      <option value="classA">世欧校区</option>
      <option value="classB">东街口校区</option>
      <option value="classC">五四路校区</option>
      <option value="classD">群升校区</option>
      <option value="classE">明腾校区</option>
      <option value="classF">东街口校区F</option>
    </select>
    <button id="btn" onclick="check()" accesskey="s">选择校区</button>
  </div>
  <div id="container">
    <ul id="list">
      <!-- img标签放奖品图片 -->
      <!-- mask类为抽奖滚动起来的标记 -->
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
      <li><img src="images/抽奖.gif" /><div class="mask"></div></li>
    </ul>
  </div>
</body>
<script src="studentlist.js"></script>
<script type="text/javascript">

  function shuffle(arr) {
    let len = arr.length;
    for (let i = 0; i < len - 1; i++) {
      let index = parseInt(Math.random() * (len - i));
      let temp = arr[index];
      arr[index] = arr[len - i - 1];
      arr[len - i - 1] = temp;
    }
    return arr;
  }

  let studentList = "";
  let imglist;
  let len;

  function check() {
    const selectedClass = document.getElementById('classSelect').value;
    studentList = shuffle(students[selectedClass]);
    len = studentList.length;
    console.log(studentList);
    imglist = document.getElementsByTagName("img");
    for (let j = 0; j < imglist.length; j++) {
      imglist[j].setAttribute("src","images/抽奖.gif");
      (function (index) {
        imglist[index].addEventListener("click", function (event) {
          startLotteryAnimation(index);
        });
      })(j);
    }
  }

  function startLotteryAnimation(index) {
    imglist[index].classList.add('lottery-running');
    imglist[index].classList.add('blinking'); // 添加闪烁效果类名，让图片在抽奖时闪烁
    setTimeout(() => {
      imglist[index].classList.remove('lottery-running');
      imglist[index].classList.remove('blinking'); // 停止动画和闪烁效果
      showResult(index);
    }, 3000); // 调整为3秒，和动画时长一致，这里可以根据想要的抽奖时长灵活调整
  }

  function showResult(index) {
    if (studentList && studentList.length > 0) {
      imglist[index].setAttribute("src", "images/" + studentList[index % len] + ".png");
      // let index = parseInt(Math.random()*10);
      // imglist[index].setAttribute("src", "images/" + studentList[index % len] + ".png");
    }
  }
</script>

</html>